<template>
  <div class="side-view">
    <div class="search-wrap">
      <t-select class="select"></t-select>
      <div class="divide"></div>
      <t-input class="input">
        <template #suffixIcon>
          <search-icon :style="{ cursor: 'pointer' }" />
        </template>
      </t-input>
    </div>
    <div class="tree-view">
      <div class="header" @click="handleClickAll">
        <div class="header-content">
          <div class="icon-wrap">
            <svg-icon name="item-device" class="icon"></svg-icon>
          </div>
          全部设备
        </div>
        <div class="num">({{ list.length }})</div>
      </div>
      <div class="content">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="item"
          :class="{ active: item.value === modelValue }"
          @click="handleItemClick(item)"
        >
          <svg-icon class="item-icon" name="item-camera" />
          <t-tooltip
            class="placement top center"
            :content="item.label"
            placement="top"
            :overlay-style="{ width: '200px' }"
            :show-arrow="true"
          >
            <div class="label">{{ item.label }}</div>
          </t-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { SearchIcon } from 'tdesign-icons-vue-next';

defineProps({
  list: {
    type: Array as any,
    default: () => {
      return [
        { label: '1号设备', value: '1' },
        { label: '自定义设备名称000552642', value: '2' },
        { label: '自定义设备名称000552642', value: '3' },
        { label: '自定义设备名称000552642', value: '4' },
        { label: '自定义设备名称000552642自定义设备名称000552642', value: '5' },
      ];
    },
  },
  modelValue: {
    type: [Number, String],
    default: '',
  },
});

const emits = defineEmits(['update:modelValue', 'change']);

const handleItemClick = (data: any) => {
  const { value } = data;
  emits('change', value, data);
  emits('update:modelValue', value);
};

const handleClickAll = () => {
  emits('change', '', {});
  emits('update:modelValue', '');
};
</script>

<style lang="less" scoped>
.side-view {
  padding: 24px 12px;

  .search-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #c6ced9;
    border-radius: 4px;

    .select {
      width: 74px;
    }

    .divide {
      width: 1px;
      height: 18px;
      background-color: #c6ced9;
    }

    .input {
      width: calc(100% - 74px);
    }

    :deep(.t-input) {
      border: none;

      &.focus {
        box-shadow: none;
      }
    }
  }

  .tree-view {
    margin-top: 12px;
    font-size: 12px;
    color: #333;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 3px;
      cursor: pointer;

      .header-content {
        display: flex;
        align-items: center;
        gap: 5px;

        .icon-wrap {
          width: 22px;
          height: 22px;
          background: rgb(1 119 251 / 10.2%);
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 5px;

          .icon {
            width: 12px;
            height: 12px;
          }
        }
      }
    }

    .content {
      padding-left: 26px;
      padding-top: 18px;
      position: relative;

      &::after {
        content: '';
        height: calc(100% - 13px);
        width: 1px;
        position: absolute;
        left: 10px;
        top: 0;
        background: url('@/assets/images/line.png') 0 0 / 100% 100% repeat;
      }

      .item {
        display: flex;
        gap: 8px;
        align-items: center;
        position: relative;
        cursor: pointer;
        height: 26px;
        width: 100%;
        border-radius: 5px;
        padding: 0 5px;
        box-sizing: border-box;

        & + .item {
          margin-top: 16px;
        }

        &::before {
          content: '';
          width: 13px;
          height: 1px;
          position: absolute;
          left: -15px;
          top: 50%;
          transform: translateY(-50%);
          background: url('@/assets/images/line-h.png') 0 0 / 100% 100% repeat;
        }

        &.active {
          background: #0f64ff;
          color: #fff;

          .item-icon {
            color: #fff;
          }
        }

        .item-icon {
          color: #a5b4cb;
        }

        .label {
          width: calc(100% - 22px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
